<template>
  <div class="banner" v-if="form.photo">
    <el-image :src="form.photo"></el-image>
  </div>
  <div v-if="form" class="container flex flex-col w-[1280px] m-auto my-3">
    <el-breadcrumb class="py-2" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/article/${form.categoryId}` }">{{ form.categoryName }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ form.title }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div :title="`标题${form.name}`" class="w-7xl m-auto mt-10">
        <div class="title text-3xl text-center">{{ form.name }}</div>
        <div v-html="form.content">
        </div>
    </div>
    <div class="flex flex-wrap justify-between w-[1280px] m-auto my-3">

      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>

    </div>
  </div>
  <div v-if="!form">
    <el-empty description="404 页面不存在"></el-empty>
  </div>
</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import type {Article} from "~/api/cms/article/model";
import {useRequest} from "~/composables/useRequest";

const route = useRoute();
const { query, params } = route;
const { id} = params;

// 页面信息
const form = ref<Article | any>();

// 请求数据
const { data: article } = await useRequest<ApiResult<Article>>('/cms/article/' + id)

if (article.value) {
  form.value = article.value.data;
  useHead({
    title: `${form.value.title} - 网宿软件`,
    meta: [{ name: "keywords", content: "Nuxt Vue SSR Typescript" }],
    bodyAttrs: {
      class: "page-container",
    },
    script: [
      {
        children: "console.log('Hello World')",
      },
    ],
  });
}
</script>

<style scoped lang="scss">

</style>
